// 实现这个项目的构建任务
const {src ,dest,parallel,watch,series} =require('gulp')
const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins()
const broesersync = require('browser-sync')
const bs = broesersync.create()
const del = require('del')
const cwd = process.cwd()
let config = {
    build:{
        src:'src',
        temp:'temp',
        dist:'dist',
        public:'public',
        paths:{
            style:'assets/styles/*.scss',
            scripts:'assets/scripts/*.js',
            pages:'*.html',
            image:'assets/images/**',
            font:'assets/fonts/**',
        }
    }
}
try{
    const loadConfig = require(`${cwd}pages.config.js`)
  config = Object.assign({},config,loadConfig)
}catch(err){}
//样式转换
const style = () =>{
    return src(config.build.paths.style,{base:config.build.src,cwd:config.build.src})
    .pipe(plugins.sass())
    .pipe(dest(config.build.temp))
    .pipe(bs.reload({stream:true}))
}
//js
const script = () =>{
    return src(config.build.paths.scripts,{base:config.build.src,cwd:config.build.src})
    .pipe(plugins.babel({presets:[require('@babel/preset-env')]}))
    .pipe(dest(config.build.temp))
    .pipe(bs.reload({stream:true}))
}
//page
const page = () =>{
    return src(config.build.paths.pages,{base:config.build.src,cwd:config.build.src})
    .pipe(plugins.swig({data:config.data}))
    .pipe(dest(config.build.temp))
    .pipe(bs.reload({stream:true}))
}
//图片
const image = () =>{
    return src(config.build.paths.image,{base:config.build.src,cwd:config.build.src})
    .pipe(plugins.imagemin())
    .pipe(dest(config.build.dist))
}

//文字
const font = () =>{
    return src(config.build.paths.font,{base:config.build.src,cwd:config.build.src})
    .pipe(plugins.imagemin())
    .pipe(dest(config.build.dist))
}

//public文件
const others = () =>{
    return src('**',{base:config.build.public,cwd:config.build.public})
    .pipe(dest(config.build.dist))
}

const clean = () =>{
   return del([config.build.dist,config.build.temp])
}

const useref = () => {
    return src(config.build.paths.pages, { base: config.build.temp,cwd:config.build.temp })
      .pipe(plugins.useref({ searchPath: [config.build.temp, '.'] }))
      // html js css
      .pipe(plugins.if(/\.js$/, plugins.uglify()))
      .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
      .pipe(plugins.if(/\.html$/, plugins.htmlmin({
        collapseWhitespace: true,
        minifyCSS: true,
        minifyJS: true
      })))
      .pipe(dest(config.build.dist))
  }

const browser = () =>{
    watch(config.build.paths.style,{cwd:config.build.src},style)
    watch(config.build.paths.scripts,{cwd:config.build.src},script)
    watch(config.build.paths.pages,{cwd:config.build.src},page)
    watch([
        config.build.paths.image,
        config.build.paths.font,
    ],{cwd:config.build.src},bs.reload)

    watch([
        '**',
    ],{cwd:config.build.public},bs.reload)

    bs.init({
        port:8002,
        open:false,
        notify:false,
        server:{
           baseDir:[config.build.temp,config.build.dist,config.build.public] ,
           routes:{ '/node_modules':'node_modules'}
        }
    })
}

const compile = parallel(style,script,page)
const build = series(clean,parallel(series(compile,useref) ,image,font,others))
const serve = series(compile,browser)
module.exports = {
    clean,build,serve
}